{extend name="common/base"}
{block name="css"}
{__block__}
<style>
    .filter-item {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    #more-filter {
        display: none;
    }
</style>
{/block}
{block name="content"}
<table id="contract" lay-filter="contract"></table>
<script type="text/html" id="operateBar">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

{// 审批状态 }
<script type="text/html" id="nameTpl">
    {{d.name}}
    {{# if(d.approval) { }}
        {{#
            var iconColor='';
            if(d.approval.start==2) {
                d.status = '锁定';
                iconColor='#393D49'
            } else {
                var process = Math.floor(d.approval.process / d.approval.total_nodes * 100);
                if(process>100) process=100;
                process += '%';
                d.status = '审批进度 ' + process;
                iconColor='#FFB800';
            }
            if(d.approval.status==2) {d.status+=' <span class="layui-badge layui-bg-orange">审核通过</span>';iconColor='#5FB878'}
            if(d.approval.status==3) {d.status+=' <span class="layui-badge">审核驳回</span>';iconColor='#FF5722'}

    }}

        <span class="icon icon-flow hasApproval" style="color:{{iconColor}}" data-name="{{d.approval.name}}" data-status='{{d.status}}'></span>
    {{# } }}
</script>

{/block}

{block name="js"}
{__block__}
<script>
    layui.use(['form', 'table','laydate'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        // 渲染表格
        var tableIns = table.render({
            elem: '#contract'
            , height: 'full-270'
            , data: {$contracts}
            , page: true //开启分页
            , limit: 15
            , cols: [[ //表头
                {checkbox: true},
                {field: 'id', title: 'ID', width: 100, sort: true}
                , {field: 'contract_sn', title: '合同编号', sort: true}
                , {field: 'name', title: '合同标题', sort: true}
                , {field: 'type', title: '合同类型', templet: '<div>{{d.type.name}}</div>', sort: true}
                , {field: 'manager', title: '负责人', sort: true}
                , {
                    field: 'due_date',
                    title: '到期日',
                    templet: '<div>{{new Date(d.due_date * 1000).toLocaleDateString()}}</div>',
                    sort: true
                }
                , {title: '操作', fixed: 'right', width: 150, align: 'center', toolbar: '#operateBar'}
            ]]
        });
        // 表格工具条操作
        table.on('tool(contract)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            console.log(data);
            // 删除
            if (layEvent === 'del') {
                layer.confirm('确定要删除吗', {icon: 3, title: '提示'}, function (index) {
                    var delLoadingIndex = layer.load(1);
                    $.ajax({
                        type: 'DELETE',
                        url: '/contract/del/' + data.id,
                        success: function (result) {
                            layer.close(delLoadingIndex);
                            if (result === 1) {
                                obj.del();
                                layer.msg('操作成功');
                                console.log(result);
                            } else if (result === 'hasApproval') {
                                layer.open({title: '警告', content: '当前合同已关联审批，请先删除该合同的关联审批，再进行该操作！', icon: 2})
                            } else {
                                layer.msg('操作失败 ' + result);
                                console.log(result);
                            }
                        },
                        error: function (error) {
                            layer.close(delLoadingIndex);
                            layer.msg('操作失败');
                            console.log(error)
                        }
                    });

                    layer.close(index);
                });
            }
            // 编辑
            if (layEvent === 'edit') {
                location.href = '/contract/edit/' + data.id;
            }

            // 查看详情
            if (layEvent === 'detail') {
                var dueDays = '';
                if (data.days) {
                    dueDays = '<span class="layui-badge" style="margin-left: 15px;">' + data.days + '天后过期</span>';
                }
                var content = '<div style="padding: 10px;">' +
                    '<table class="layui-table">' +
                    '<tr><th style="font-weight: bold;" width="80">ID</th><td>' + data.id + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">合同编号</th><td>' + data.contract_sn + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">合同名称</th><td>' + data.name + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">签约日</th><td>' + new Date(data.contract_date * 1000).toLocaleDateString() + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">到期日</th><td>' + new Date(data.due_date * 1000).toLocaleDateString() + dueDays + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">客户名称</th><td>' + data.customer.name + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">客户联系人</th><td>' + data.linkman.name + ' ' + data.linkman.phone + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">备注</th><td>' + data.note + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">合同负责人</th><td>' + data.manager + '</td></tr>' +
                    '<tr><th style="font-weight: bold;">合同所属部门</th><td>' + data.department + '</td></tr>';
                if (data.extra.length > 0) {
                    for (var i in data.extra) {
                        content += '<tr><th style="font-weight: bold;">' + data.extra[i]['title'] + '</th><td>' + data.extra[i]['content'] + '</td></tr>';
                    }
                }
                if (data.file) {
                    content += '<tr><th style="font-weight: bold;">附件</th><td><a href="/uploads/' + data.file.src + '" type="button" class="layui-btn">\n' +
                        '                    <i class="layui-icon">&#xe67c;</i>' + data.file.title + '\n' +
                        '                </a></td></tr>';
                }
                content += '<tr><th style="font-weight: bold;">创建时间</th><td>' + data.create_time + '</td></tr>' +
                    '</table>' +
                    '</div>';
                var index = layer.open({
                    type: 1,
                    area: ['500px'],
                    maxmin: true,
                    btn: '确定',
                    btnAlign: 'c',
                    title: '合同详情',
                    content: content //这里content是一个普通的String
                });
            }
        })

        // tips
        var tipsIndex = null;
        $('.hasApproval').hover(function () {
            var that = this;
            var msg = '已关联审批<br><b>'+$(that).data('name')+'</b><br>'+$(that).data('status');
            tipsIndex = layer.tips(msg, that,{tips: [2,'#5FB878'],time: 0});
        },function(){
            layer.close(tipsIndex);
        })
    })
</script>
{/block}